/* eslint-disable import/extensions */
<template>
  <div id="Index">
    <div class="head-block">
      <!-- <p class="head-title-A">宝宝英语启蒙</p>
      <p class="head-title-B">好帮手</p> -->

      <div class="head-img">
        <img :src="userAvatar" alt="" style="width: 100%;">
      </div>
    </div>

    <div class="white-block-insert">
      <p class="title">帮好友拿下88折优惠, 也送你会员哦!</p>
      <div class="input-outer">
        <input type="text" placeholder="请输入手机号码" v-model="phoneNum">
      </div>
      <div class="btn-line">
        <p class="yh-btn get-now-btn" @click="handelSubmit">立即领取</p>
      </div>
    </div>

    <div class="white-block bg-a">
      <!-- <p class="title">宝宝英语启蒙好帮手</p>
      <div class="img-block"></div> -->
    </div>

    <div class="white-block bg-b">
      <!-- <p class="title">纯英文动画 宝宝喜欢的不得了</p>
      <div class="img-block"></div> -->
    </div>

    <div class="white-block bg-c">
      <!-- <p class="title">海量英文绘本点读</p>
      <div class="img-block"></div> -->
    </div>
    <div class="white-block bg-d">
      <!-- <p class="title">磨耳朵儿歌 宝宝好睡眠</p>
      <div class="img-block"></div> -->
    </div>
    <BottomBar style="position: fixed; left: 0; bottom: 0;"></BottomBar>
  </div>
</template>

<style lang="less" scoped>
#Index {
  display: block;
  background: #f72a72;
  padding-bottom: 2.0667rem;
  .head-block {
    position: relative;
    width: 100%;
    height: 6.32rem;
    margin: 0 auto;
    margin-bottom: 1.44rem;
    background: url("./../../assets/imgs/picture_banner@2x.png") no-repeat center center;
    background-size: cover;
    .head-title-A {
      font-size: 32px;
      line-height: 48px;
      color: #000000;
      text-align: center;
    }
    .head-title-B {
      font-size: 0.5067rem;
      line-height: 0.64rem;
      color: #000000;
      text-align: center;
    }
    .head-img {
      position: absolute;
      left: 50%;
      bottom: -0.05rem;
      width: 0.88*2rem;
      height: 0.88*2rem;
      margin-left: -0.88rem;
      border-radius: 50%;
      overflow: hidden;
    }
  }

  .white-block-insert {
    width: 8.9733rem;
    height: 4.0533rem;
    margin: 0.3rem auto;
    background: #ffffff;
    border-radius: 0.08rem;
    .title {
      font-size: 0.32rem;
      line-height: 1rem;
      color: #ff0043;
      text-align: center;
    }
    .input-outer {
      width: 7.4667rem;
      height: 1.0667rem;
      border-bottom: 1px solid #ededed;
      margin: 0.2667rem auto;
      input {
        width: 7.4667rem;
        height: 1rem;
        border: none;
        outline: none;
        font-size: 0.4267rem;
      }
    }
    .btn-line {
      .get-now-btn {
        width: 7.4667rem;
        height: 1.0667rem;
        line-height: 1.0667rem;
        margin: 0 auto;
        background: #ffef02;
        border-radius: 0.5333rem;
        border: 2px solid #000000;
        font-size: 0.4267rem;
        text-align: center;
      }
    }
  }

  .white-block {
    width: 8.9733rem;
    height: 7.4667rem;
    margin: 0.3rem auto;
    // background: #ffffff;
    background-size: contain;
    border-radius: 0.1rem;
    .title {
      line-height: 1.28rem;
      font-size: 0.48rem;
      color: #333333;
      text-align: center;
    }
    .img-block {
      width: 8.5rem;
      height: 5.9rem;
      margin: 0 auto;
      background: red;
    }
  }
}

.bg-a {
  background: url('./../../assets/imgs/picture_one@2x.png') no-repeat center center;
}
.bg-b {
  background: url('./../../assets/imgs/picture_two@2x.png') no-repeat center center;
}
.bg-c {
  background: url('./../../assets/imgs/picture_three@2x.png') no-repeat center center;
}
.bg-d {
  background: url('./../../assets/imgs/picture_four@2x.png') no-repeat center center;
}

</style>

<script>
import BottomBar from '@/components/BottomBar.vue'
export default {
  name: 'Index',
  data() {
    return {
      phoneNum: '',
      baseUrl: process.env.VUE_APP_BASE_URL,
      userAvatar: '',
      currentInfo: {}
    }
  },
  components: {
    BottomBar
  },
  created() {
    console.log(process.env)
    this.currentInfo.token = this.$router.currentRoute.query.token
    // this.currentInfo.clientType = this.$router.currentRoute.query.clientType
    // this.currentInfo.imei = this.$router.currentRoute.query.imei
    this.currentInfo.userId = this.$router.currentRoute.query.userId
    // this.currentInfo._v = '1.0.0'
  },
  mounted () {
    this.pageInit()
  },
  methods: {
    pageInit() {
      this.$$.get(`${this.baseUrl}/user/queryById?userId=${this.currentInfo.userId}`)
        .then(res => {
          this.userAvatar = res.data.data.avatarUrl
          console.log(res.data.data.avatarUrl)
        })
    },
    handelSubmit() {
      console.log(this.phoneNum)
      if(!(/^1[23456789]\d{9}$/.test(this.phoneNum))) { 
        alert("手机号码有误，请重填")  
        return false 
      }
      
      this.$$.get(`${this.baseUrl}/activity/InviteFriend?phone=${this.phoneNum}&userId=${this.currentInfo.userId}`)
        .then(res => {
          console.log(res)
          alert(res.msg)
          this.phoneNum = ''
        })
        .catch(e => {
          console.log(e)
          alert(e.msg)
          this.phoneNum = ''
        })
    } 
  }
}
</script>
